<template>
  <div>
    <!--≈ -->
    <DynamicTable
      class="table-container"
      :height="null"
      :total="0"
      :showPagination="false"
      :data="tableData"
      :columns="tableColumns"
      @pagination="() => {}"
    />
  </div>
</template>
<script lang="jsx">
import { defineComponent, computed, watch, ref, reactive } from "vue";
import DynamicTable from "@/components/DynamicTable";

export default defineComponent({
  name: "ReturnValueEntering",
  props: {
    modelValue: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelValue", "insert"],
  components: { DynamicTable },
  setup(props, { emit }) {
    const tableData = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    });
    const tableColumns = ref([
      {
        label: "返回值",
        render: (h, { row, index }) => (
          <span>
            {
              <el-input
                v-model={row.jsonSource}
                placeholder="例：$['store']['bicycle']"
              />
            }
          </span>
        ),
      },
      {
        label: "映射到",
        render: (h, { row, index }) => (
          <span>
            {
              <el-input
                onChange={handleCreate()}
                v-model={row.jsonTarget}
                placeholder="例：$['store']['bicycle']"
              />
            }
          </span>
        ),
      },
      {
        label: "操作",
        fixed: "right",
        width: "60px",
        render: (h, { row, index }) => (
          <span>
            {tableData.value.length > 1 && index != tableData.value.length ? (
              <el-popconfirm
                title="确定删除吗？"
                confirmButtonText="好的"
                cancelButtonText="不用了"
                onConfirm={() => handleDelete(row, index)}
                v-slots={{
                  reference: () => (
                    <el-button type="text" size="small">
                      删除
                    </el-button>
                  ),
                }}
              />
            ) : (
              ""
            )}
          </span>
        ),
      },
    ]);
    const isNullString = (str) => {
      return (
        str == undefined ||
        str == null ||
        str.replace(/(^\s*)|(\s*$)/g, "").length == 0
      );
    };
    // 每行的两个字段必须填写一个，才能出现新一行
    const handleCreate = () => {
      const result = tableData.value.findIndex(
        (item) => isNullString(item.jsonSource) || isNullString(item.jsonTarget)
      );
      if (result == -1) {
        tableData.value.push({
          jsonSource: null,
          jsonTarget: null,
        });
      }
    };
    const handleDelete = (row, index) => {
      tableData.value.splice(index - 1, 1);
    };
    return {
      tableData,
      tableColumns,
    };
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-table) thead th {
  background: #f2f3f5;
  color: #333;
}
.pagination-container {
  padding-top: 20px;
  text-align: right;
  min-height: 48px;
}
.pagination-container.hidden {
  display: none;
}
.el-pagination {
  padding: 0;
}
.tag {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  width: 40px;
  text-align: center;
  font-size: 12px;
  border-radius: 2px;
  &.blue {
    color: #5573e4;
    background: rgba(85, 115, 228, 0.1);
    border: 1px solid rgba(85, 115, 228, 0.6);
  }
  &.yellow {
    color: #f7b500;
    background: rgba(247, 181, 0, 0.1);
    border: 1px solid rgba(247, 181, 0, 0.6);
  }
}
</style>
